<style lang="scss" scoped>
  .tab-title-list{
    height: 50px;
    width: 750rpx;
    padding: 0px 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    background: #fff;
    border-bottom: 1px solid #eee;
    .tab-title-item{
      display: inline-block;
      font-size: 14px;
      color: #333;
      height: 50px;
      box-sizing: border-box;
      line-height: 50px;
      margin-right: 20px;
      &.active{
        border-bottom:1px solid $fun-primary-color;
      }
    }
  }
</style>
<template>
  <div class="tab-box fun-tab">
    <div class="tab-title-list fun-tabs__nav">
      <div class="tab-title-item" :class="{active:idx===navIndex}" v-for="(item,idx) in navs" :key="idx" @click="setCurrentIndex(idx)">{{item}}</div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>

  </div>
</template>

<script>

import { basic } from '@/mixins'
import { Exception } from '@/common/Exception'
import { isDef } from '@/common/helper'

export default {
  name: 'layout-tab',
  mixins: [basic],
  props: {

    active: {
      type: Number,
      default: 0
    }
  },
  computed: {

  },
  data () {
    return {
      currentIndex: 0,
      navs: []
    }
  },
  methods: {
    // scroll active tab into view
    // scrollIntoView () {
    //   const { currentIndex, scrollable } = this.data
    //
    //   if (!scrollable) {
    //     return
    //   }
    //
    //   Promise.all([
    //     this.getRect('.fun-tab', true),
    //     this.getRect('.fun-tabs__nav')
    //   ]).then((tabRects, navRect) => {
    //     const tabRect = tabRects[currentIndex]
    //     const offsetLeft = tabRects.slice(0, currentIndex).reduce((prev, curr) => prev + curr.width, 0)
    //     this.scrollLeft = offsetLeft - (navRect.width - tabRect.width) / 2
    //   }).catch(err => Exception.handle(err))
    // },
    setCurrentIndex (currentIndex) {
      const { data, children = [] } = this
      if (!isDef(currentIndex) || currentIndex >= children.length || currentIndex < 0) {
        return
      }
      if (currentIndex === data.currentIndex) {
        return
      }
      this.currentIndex = currentIndex
      this.$emit('change', currentIndex)
    },
    onTap (index) {
      const child = this.children[index]
      if (child.data.disabled) {
      } else {
        this.setCurrentIndex(index)
      }
    }
  },
  created () {
    console.log(this.$children)
  },
  ready () {
    this.currentIndex = this.active
  }
}
</script>
